<template>
  <div class="wrap">

    <sky-panel title="Vue3.0树形表格组件">

      <template #handle>
        <el-button type="primary" @click="deleteLine">删除行</el-button>
        <el-button type="primary" @click="insertChild">插入子元素</el-button>
        <el-button type="primary" @click="insertBefore">节点前插入元素</el-button>
        <el-button type="primary" @click="insertAfter">节点后插入元素</el-button>
        <el-button type="primary" @click="getAllNodes">获取所有节点</el-button>
      </template>

      <template #main>

        <sky-tree-table
          ref="skyTable"
          v-slot="row"
          show-checkbox
          :self-thead-config="selfTheadConfig"
          fixed-head
          fixed-column
          :max-height="350"
          :table-width="1500"
          :data="data"
          node-key="id"
          :props="defaultProps"
          @getCurrent="getCurrent"
        >
          <sky-tree-column :row="row?.scope" prop="code" label="编码" width="350" ladder fixed fixed-left-width="0">{{ row?.scope?.data.id }}</sky-tree-column>
          <sky-tree-column :row="row?.scope" prop="name" label="名字" />
          <sky-tree-column :row="row?.scope" prop="col1" label="col1">{{ row?.scope?.data.name }}</sky-tree-column>
          <sky-tree-column :row="row?.scope" prop="col2" label="col2">{{ row?.scope?.data.name }}</sky-tree-column>
          <sky-tree-column :row="row?.scope" prop="col3" label="col3">{{ row?.scope?.data.name }}</sky-tree-column>
        </sky-tree-table>

      </template>
    </sky-panel>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const skyTable = ref()
    const current = ref(null)

    const guid = () => {
      return 'xxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (Math.random() * 16) | 0
        var v = c === 'x' ? r : (r & 0x3) | 0x8
        return v.toString(16)
      })
    }

    const deleteLine = () => {
      skyTable.value.remove(current.value)
    }

    const insertChild = () => {
      skyTable.value.append(
        {
          id: guid(),
          name: '插入的子元素'
        },
        (current.value as any).data.id
      )
    }

    const insertBefore = () => {
      skyTable.value.insertBefore(
        {
          id: guid(),
          name: '节点前插入一个元素'
        },
        (current.value as any).data.id
      )
    }

    const insertAfter = () => {
      skyTable.value.insertAfter(
        {
          id: guid(),
          name: '节点后插入一个元素'
        },
        (current.value as any).data.id
      )
    }

    const getAllNodes = () => {
      console.log(skyTable.value.getAllNodes())
    }

    const getCurrent = (type: any, node: null) => {
      current.value = node
    }

    return {
      skyTable,
      deleteLine,
      insertChild,
      insertBefore,
      insertAfter,
      getAllNodes,
      getCurrent
    }
  },
  data() {
    return {
      data: [
        {
          id: '1',
          name: '一级 1',
          children: [
            {
              id: '1-1',
              name: '二级 1-1',
              children: [
                {
                  id: '1-1-1',
                  name:
                      '特别长的文本~特别长的文本~特别长的文本~特别长的文本~特别长的文本~特别长的文本~'
                }
              ]
            }
          ]
        },
        {
          id: '2',
          name: '一级 2',
          children: [
            {
              id: '2-1',
              name: '二级 2-1',
              children: [
                {
                  id: '2-1-1',
                  name: '三级 2-1-1'
                }
              ]
            },
            {
              id: '2-2',
              name: '二级 2-2',
              children: [
                {
                  id: '2-2-1',
                  name: '三级 2-2-1'
                }
              ]
            }
          ]
        },
        {
          id: '3',
          name: '一级 3',
          children: [
            {
              id: '3-1',
              name: '二级 3-1',
              children: [
                {
                  id: '3-1-1',
                  name: '三级 3-1-1'
                }
              ]
            },
            {
              id: '3-2',
              name: '二级 3-2',
              children: [
                {
                  id: '3-2-1',
                  name: '三级 3-2-1'
                }
              ]
            }
          ]
        }
      ],
      selfTheadConfig: [
        [
          {
            title: '编码',
            colspan: 1,
            rowspan: 2,
            fixed: true
          },
          {
            title: '名称',
            colspan: 1,
            rowspan: 2
          },
          {
            title: '详情',
            colspan: 3,
            rowspan: 1
          }
        ],
        [
          {
            title: 'col1',
            colspan: 1,
            rowspan: 1
          },
          {
            title: 'col2',
            colspan: 1,
            rowspan: 1
          },
          {
            title: 'col3',
            colspan: 1,
            rowspan: 1
          }
        ]
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  }
})
</script>

<style scoped lang="less">
.wrap {
  margin: 0 auto 20px;
  padding-bottom: 50px;
}
</style>
